<template>
  <div class="banner">
    <swiper :options="swiperBanner" ref="mySwiper">

      <swiper-slide
        v-for="(neirong, d) in this.relativeList"
        :key="d"
        ><img :src="$api + neirong.image" alt="" class="w100"
      /></swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>


<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperBanner: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
      },
      relativeList: []
    };
  },
  methods:{
    getList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
          "//api/index/allslides"
        )
        .then(function (response) {
          // if(response.data.data[0].type == 'activity'){
          //   that.relativeList = response.data.data.type;
          // }else{
          //
          // }
          //默认首页轮播
          that.relativeList = response.data.data[1].list;

          //活动
          if(window.location.href.indexOf('hotlist') !== -1 || window.location.href.indexOf('hotshow') !== -1){
            that.relativeList = response.data.data[0].list;
          }

          //团队
          if(window.location.href.indexOf('hotteam') !== -1){
            that.relativeList = response.data.data[5].list;
          }

          //故事
          if(window.location.href.indexOf('stroy') !== -1){
            that.relativeList = response.data.data[4].list;
          }

          //新闻中心
          if(window.location.href.indexOf('news') !== -1){
            that.relativeList = response.data.data[3].list;
          }

          ////console.log('aaaa', that.relativeList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style >
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* 解决IOS默认滑动很卡的情况 */
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: scroll !important;
  height: auto !important;
}
.swiper-pagination-bullet {
  width: 0.8125rem;
  height: 0.8125rem;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #ffce45 !important;
}
.banner .swiper-pagination {
  bottom: 2.5rem;
}
</style>

<style lang="less" scoped>
@media (max-width: 990px) {
  .banner .swiper-pagination {
    bottom: 20px;
  }
}
@media (max-width: 767px) {
  .banner .swiper-pagination {
    bottom: 10px;
  }
 
}
</style>
